<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花生云盘主页</title>
  <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .app-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    
    .header {
      background: linear-gradient(to right, #4a00e0, #8e2de2);
      color: white;
      padding: 15px 30px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .header h1 {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 1px;
    }
    
    .main-content {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    .sidebar {
      width: 280px;
      background: rgba(255, 255, 255, 0.95);
      padding: 20px;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    }
    
    .user-info {
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
    }
    
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #6a11cb;
      margin-bottom: 15px;
    }
    
    .username {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
    }
    
    .reg-time {
      font-size: 14px;
      color: #666;
    }
    
    .sidebar-stats {
      margin-top: 20px;
    }
    
    .stat-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .stat-label {
      color: #666;
    }
    
    .stat-value {
      font-weight: 500;
      color: #4a00e0;
    }
    
    .content-area {
      flex: 1;
      background: white;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .content-header {
      padding: 20px 30px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .content-title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
    }
    
    .btn-upload {
      background: linear-gradient(to right, #4a00e0, #8e2de2);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
    }
    
    .btn-upload:hover {
      background: linear-gradient(to right, #3a00c0, #7e1dc2);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .btn-upload i {
      margin-right: 8px;
    }
    
    .file-table-container {
      flex: 1;
      overflow: auto;
      padding: 0 30px 20px;
    }
    
    .file-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }
    
    .file-table th {
      background: #f8f9fa;
      padding: 15px 10px;
      text-align: left;
      font-weight: 600;
      color: #333;
      border-bottom: 2px solid #e9ecef;
    }
    
    .file-table td {
      padding: 12px 10px;
      border-bottom: 1px solid #e9ecef;
      color: #555;
    }
    
    .file-table tr:hover {
      background-color: #f8f9fa;
    }
    
    .btn-download {
      background: linear-gradient(to right, #00b09b, #96c93d);
      color: white;
      border: none;
      border-radius: 6px;
      padding: 8px 15px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
    }
    
    .btn-download:hover {
      background: linear-gradient(to right, #009d87, #85b835);
      transform: translateY(-1px);
    }
    
    .btn-download i {
      margin-right: 5px;
    }
    
    .file-hash {
      font-family: monospace;
      font-size: 13px;
    }
    
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #666;
    }
    
    .empty-state i {
      font-size: 48px;
      margin-bottom: 15px;
      color: #ddd;
    }
    
    .empty-state p {
      font-size: 16px;
    }
    
    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
      z-index: 10;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #6a11cb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
      
      .sidebar {
        width: 100%;
        height: auto;
      }
      
      .file-table-container {
        overflow-x: auto;
      }
      
      .file-table {
        min-width: 800px;
      }
    }
  </style>
</head>

<body>
  <div id="app" class="app-container">
    <div class="loading-overlay" id="loadingOverlay">
      <div class="spinner"></div>
    </div>
    
    <div class="header">
      <h1><i class="fas fa-cloud"></i> 花生云盘</h1>
    </div>
    
    <div class="main-content">
      <div class="sidebar">
        <div class="user-info">
          <img class="avatar" src="/static/img/avatar.jpeg" alt="用户头像">
          <div class="username" id="username">加载中...</div>
          <div class="reg-time">注册时间: <span id="regtime">加载中...</span></div>
        </div>
        
        <div class="sidebar-stats">
          <div class="stat-item">
            <span class="stat-label"><i class="fas fa-cloud-upload-alt"></i> 总文件数</span>
            <span class="stat-value" id="fileCount">0</span>
          </div>
          <div class="stat-item">
            <span class="stat-label"><i class="fas fa-hdd"></i> 已用空间</span>
            <span class="stat-value" id="usedSpace">0 MB</span>
          </div>
          <div class="stat-item">
            <span class="stat-label"><i class="fas fa-star"></i> 账户状态</span>
            <span class="stat-value">正常</span>
          </div>
        </div>
      </div>
      
      <div class="content-area">
        <div class="content-header">
          <div class="content-title"><i class="fas fa-file-alt"></i> 文件列表</div>
          <button class="btn-upload" onclick="toUploadFile()">
            <i class="fas fa-upload"></i> 上传文件
          </button>
        </div>
        
        <div class="file-table-container">
          <table class="file-table" id="filetbl">
            <thead>
              <tr>
                <th style="width: 20%;">文件哈希</th>
                <th style="width: 25%;">文件名</th>
                <th style="width: 10%;">文件大小</th>
                <th style="width: 15%;">上传时间</th>
                <th style="width: 15%;">最后更新</th>
                <th style="width: 15%;">操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- 文件列表将通过原有的JavaScript逻辑动态生成 -->
            </tbody>
          </table>
          
          <div id="emptyState" class="empty-state" style="display: none;">
            <i class="fas fa-folder-open"></i>
            <p>暂无文件，点击上方按钮上传您的第一个文件</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="/static/js/auth.js"></script>
  <script lang="javascript">
    // 完全保持原有的JavaScript逻辑不变
    window.onload = function () {
      var username = document.getElementById('username');
      $.ajax({
        url: "/user/info?" + queryParams(),
        type: "GET",
        error: function (jqXHR, textStatus, errorThrown) {
          if (textStatus == "error") {
            alert(textStatus + " : " + errorThrown);
          } else {
            alert(textStatus);
          }
        },
        success: function (body, textStatus, jqXHR) {
          var resp = JSON.parse(body);
          document.getElementById("username").innerHTML = resp.data.Username;
          document.getElementById("regtime").innerHTML = resp.data.SignupAt;
          updateFileList();
        }
      });
    }

    function updateFileList() {
      $.ajax({
        url: "/file/query?" + queryParams(),
        type: "POST",
        data: {
          limit: 15
        },
        error: function (jqXHR, textStatus, errorThrown) {
          if (textStatus == "error") {
            alert(textStatus + " : " + errorThrown);
          } else {
            alert(textStatus);
          }
        },
        success: function (body, textStatus, jqXHR) {
          if (!body) {
            document.getElementById('emptyState').style.display = 'block';
            return;
          }
          var data = JSON.parse(body);
          
          // 修复：保持原有的数据解析逻辑
          if (!data || data.length <= 0) {
            document.getElementById('emptyState').style.display = 'block';
            return;
          }

          // 更新文件统计信息
          document.getElementById('fileCount').innerText = data.length;
          
          var totalSize = 0;
          var tableBody = document.querySelector('#filetbl tbody');
          tableBody.innerHTML = '';

          for (var i = 0; i < data.length; i++) {
            totalSize += data[i].FileSize || 0;
            
            var x = document.createElement('tr');
            
            var cell = x.insertCell();
            cell.className = 'file-hash';
            cell.innerHTML = data[i].FileHash.substr(0, 20)+"...";

            cell = x.insertCell();
            cell.innerHTML = data[i].FileName;

            cell = x.insertCell();
            cell.innerHTML = formatFileSize(data[i].FileSize);

            cell = x.insertCell();
            cell.innerHTML = data[i].UploadAt;

            cell = x.insertCell();
            cell.innerHTML = data[i].LastUpdated;

            cell = x.insertCell();
            var downloadBtn = document.createElement('button');
            downloadBtn.className = 'btn-download';
            downloadBtn.innerHTML = '<i class="fas fa-download"></i> 下载';
            downloadBtn.onclick = (function(file) {
              return function() {
                downloadFile('/file/download?filename=' + file.FileName + 
                           '&filehash=' + file.FileHash + '&' + queryParams());
              };
            })(data[i]);
            cell.appendChild(downloadBtn);

            tableBody.appendChild(x);
          }
          
          // 更新已用空间
          document.getElementById('usedSpace').innerText = formatFileSize(totalSize);
          document.getElementById('emptyState').style.display = 'none';
        }
      });
    }

    function formatFileSize(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    function toUploadFile() {
      window.location.href = '/file/upload?' + queryParams();
    }

    function downloadFile(durl) {
      document.getElementById('loadingOverlay').style.display = 'flex';
      
      $.ajax({
        url: durl,
        type: "GET",
        error: function (jqXHR, textStatus, errorThrown) {
          document.getElementById('loadingOverlay').style.display = 'none';
          if (textStatus == "error") {
            alert(textStatus + " : " + errorThrown);
          } else {
            alert(textStatus);
          }
        },
        success: function (body, textStatus, jqXHR) {
          document.getElementById('loadingOverlay').style.display = 'none';
          try {
            alert("文件内容:\n\n" + body);
            var elemIF = document.createElement("iframe");
            elemIF.src = body;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
            alert(e);
          }
        }
      });
    }
  </script>
</body>
</html>